<template>
  <div v-loading="loading" class="platform-info-main">
    <div v-if="spInfo&&baseInfo">
      <!--基础信息-->
      <div class="platform-base-box">
        <div class="flex-x-start-center">
          <!--<el-image-->
          <!--  class="logo"-->
          <!--  :src="fileBaseUrl+form.logoUrl"-->
          <!--  fit="fill"-->
          <!--/>-->
          <div>
            <div class="name">{{ spInfo.name }}</div>
            <!--<div class="full-name">{{ form.fullName }}</div>-->
          </div>
        </div>
      </div>

      <!--账户数据-->
      <div class="common-box account-data-box">
        <div class="box-title">平台数据</div>
        <el-row :gutter="16" type="flex">
          <el-col :md="12" :lg="8" :xl="6">
            <el-card :body-style="{ padding: '20px'}">
              <div class="title app-ellipsis-l1">商户数 / 个</div>
              <div class="info app-color-primary app-ellipsis-l1">{{ baseInfo.businessNum }}</div>
            </el-card>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-card :body-style="{ padding: '20px'}">
              <div class="title app-ellipsis-l1">成员数 / 个</div>
              <div class="info app-color-primary app-ellipsis-l1">{{ baseInfo.staffNum }}</div>
            </el-card>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-card :body-style="{ padding: '20px'}">
              <div class="title app-ellipsis-l1">当前版本</div>
              <div class="info app-color-primary app-ellipsis-l1">{{ baseInfo.spPackage&&baseInfo.spPackage.name || '-' }}</div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!--账户信息-->
      <div class="common-box account-info-box">
        <div class="box-title">平台信息</div>
        <el-card :body-style="{ padding: '20px 15px'}">
          <el-row :gutter="16" type="flex">
            <el-col :lg="12" :xl="8">
              <div class="info app-ellipsis-l1">服务商编号：{{ spInfo.serial|| '-' }}</div>
              <!--<div class="info app-ellipsis-l1">所在行业：-</div>-->
              <div class="info app-ellipsis-l1">所在地区：{{ spInfo.address|| '-' }}</div>
            </el-col>
            <el-col :lg="12" :xl="8">
              <div class="info app-ellipsis-l1">负责人：{{ spInfo.principal|| '-' }}</div>
              <div class="info app-ellipsis-l1">手机号码：{{ spInfo.mobilePhone|| '-' }}</div>
              <div class="info app-ellipsis-l1">联系邮箱：{{ spInfo.email || '-' }}</div>
            </el-col>
          </el-row>
        </el-card>
      </div>

      <!-- 支付宝配置 -->
      <div v-if="zfbConfigVisible" class="common-box account-info-box zfbConfig">
        <div class="box-title">
          支付宝直连商户配置
          <el-button type="primary" size="small" @click="editZfbConfig">修改配置</el-button>
        </div>
        <el-card :body-style="{ padding: '20px 15px'}">
          <span class="labelText">*支付宝直连商户配置用于代理、商户购买流量余额以及开通插件等费用的收款，请及时配置</span>
          <div class="info">
            <span>应用ID：</span>
            <div>{{ zfbConfig.appId || '未配置' }}</div>
          </div>
          <div class="info">
            <span>支付宝开发者私钥：</span>
            <div>{{ zfbConfig.aliPrivateKey || '未配置' }}</div>
          </div>
          <div class="info">
            <span>支付宝公钥：</span>
            <div>{{ zfbConfig.aliPublicKey || '未配置' }}</div>
          </div>
        </el-card>
      </div>

    </div>

    <el-dialog title="支付宝直连商户配置" :visible.sync="zfbDialogVisible">
      <el-form v-if="zfbDialogVisible" ref="form" :model="zfbDialogConfig" :rules="rules" label-width="150px">
        <el-form-item label="应用ID" prop="appId">
          <el-input v-model="zfbDialogConfig.appId" autocomplete="off" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="支付宝开发者私钥" prop="aliPrivateKey">
          <el-input
            v-model="zfbDialogConfig.aliPrivateKey"
            autocomplete="off"
            placeholder="请输入"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
          />
        </el-form-item>
        <el-form-item label="支付宝公钥" prop="aliPublicKey">
          <el-input
            v-model="zfbDialogConfig.aliPublicKey"
            autocomplete="off"
            placeholder="请输入"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="zfbDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="zfbConfigSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { spBaseInfo, zfbMercQuery, zfbMercUpdate } from '@/api/sp'

export default {
  data() {
    return {
      // 配置
      zfbConfig: {},
      zfbDialogConfig: {},
      // 支付宝配置是否展示
      zfbConfigVisible: false,
      // 支付宝配置弹框
      zfbDialogVisible: false,
      rules: {
        appId: [{ required: true, message: '请输入应用ID', trigger: 'blur' }],
        aliPrivateKey: [{ required: true, message: '请输入支付宝开发者私钥', trigger: 'blur' }],
        aliPublicKey: [{ required: true, message: '请输入支付宝公钥', trigger: 'blur' }]
      },
      // 状态
      loading: false,
      // 数据
      baseInfo: null
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'spInfo'])
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
    this.getZfbConfig()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    getZfbConfig() {
      zfbMercQuery({
        serviceId: this.spInfo.spId
      }).then(res => {
        console.log('res', res)
        if (res.code == 0) {
          const { aliPrivateKey, aliPublicKey, appId, id } = res.data || {}
          this.zfbConfig = {
            id: id || '',
            aliPrivateKey: aliPrivateKey || '',
            aliPublicKey: aliPublicKey || '',
            appId: appId || ''
          }
          this.zfbConfigVisible = true
        } else {
          this.zfbConfigVisible = false
        }
      })
    },
    // 获取数据
    fetchData() {
      this.loading = true
      spBaseInfo({}).then(res => {
        this.baseInfo = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 按钮组
     */
    editZfbConfig() {
      console.log('123')
      this.zfbDialogConfig = { ...this.zfbConfig }
      this.zfbDialogVisible = true
    },
    /**
     * 状态组
     */
    /**
     * 方法组
     */
    zfbConfigSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const obj = {
            aliPrivateKey: this.zfbDialogConfig.aliPrivateKey,
            aliPublicKey: this.zfbDialogConfig.aliPublicKey,
            appId: this.zfbDialogConfig.appId,
            id: this.zfbDialogConfig.id,
            serviceId: this.spInfo.spId,
            syncServiceId: this.spInfo.syncTmpServicerId,
            deptId: this.spInfo.deptId
          }
          zfbMercUpdate(obj).then(res => {
            console.log('res', res)
            const { code } = res
            if (code == 0) {
              this.zfbDialogVisible = false
              this.getZfbConfig()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.platform-info-main {
  min-height: 500px;
  /*reset*/
  .el-row {
    flex-wrap: wrap;

    .el-col {
      margin-bottom: 16px;
      height: 100%;
    }
  }

  /*通用盒子*/
  .common-box {
    margin: 30px 0;

    .box-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }

  /*基础信息*/
  .platform-base-box {
    padding: 30px 0;
    border-bottom: 1px solid #EBEEF5;

    .logo {
      margin-right: 20px;
      flex: 0 0 80px;
      height: 80px;
      border-radius: 50%;
    }

    .name {
      margin-bottom: 8px;
      font-size: 18px;
      font-weight: bold;
    }
  }

  /*账户数据*/
  .account-data-box {
    .el-card {
      border-radius: 20px;
    }

    .title {
      font-weight: bold;
    }

    .info {
      margin-top: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }

  /*账户信息*/
  .account-info-box {
    .el-card {
      border-radius: 20px;

      .info {
        margin-top: 10px;
        font-size: 14px;
        color: #909399;
      }
    }
  }
  /* 支付宝配置 */
  .zfbConfig{
    .info{
      display: flex;
      span{
        width: 130px;
        display: inline-block;
        flex-shrink: 0;
      }
      div{
        word-break: break-word;
      }
    }
  }
}

</style>
